<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <div class="content">
      <!-- 外部全选的checkbox -->
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="(item, index) in cities"
          :label="item"
          :key="index"
          :disabled="false"
        >
          {{ item.value }}
        </el-checkbox>
      </el-checkbox-group>

      <el-radio-group v-model="radio">
        <el-radio
          v-for="(rItem, index) in radioList"
          :key="index"
          :label="rItem.type"
          >{{ rItem.value }}</el-radio
        >
      </el-radio-group>
      <div class="test"></div>
    </div>
    <tab-bar :tab-index="tabIndex" />
  </div>
</template>

<script>
import TabBar from "../../components/TabBar";
export default {
  name: "Study",
  components: {
    TabBar,
  },
  //		绑定属性:轮播图的播放速度,组件调用时可以修改的参数
  props: {
    speed: {
      type: Number,
      default: 2000,
    },
  },
  data: function () {
    return {
      title: "vue学习",
      tabIndex: 2,
      checkAll: false,
      checkedCities: [], //已经选中的
      cities: [
        {
          value: "北京",
          type: "0",
        },
        {
          value: "上海",
          type: "1",
        },
        {
          value: "广州",
          type: "2",
        },
        {
          value: "深圳",
          type: "3",
        },
      ], //数据源
      isIndeterminate: true,
      radio: 3,
      radioList: [
        {
          value: "北京",
          type: "0",
        },
        {
          value: "上海",
          type: "1",
        },
        {
          value: "广州",
          type: "2",
        },
        {
          value: "深圳",
          type: "3",
        },
      ],
    };
  },
  created: function () {},
  methods: {
    //这个是checkgroup上面那个checkbox的change事件 用来控制下面的checkgroup是不是要全选
    handleCheckAllChange(val) {
      console.log("checkbox的选中事件", val);
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    //这个是checkgroup选中改变的时候会触发这个方法
    handleCheckedCitiesChange(value) {
      console.log("value选中", value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #fff;
}
.content {
  flex: 1;
  flex-direction: column;
}

.test{
   width: 30px;
   height: 30px;
   background: blue;
}
</style>
